<template>
  <EasyDataTable
      :headers="headers"
      :items="items"
  />


  <EasyDataTable :headers="headers" :items="items">
    <template #loading>
      <img src="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif" style="width: 100px;height: 80px;"/>
    </template>
  </EasyDataTable>
</template>





<script lang="ts" setup>
import type {Header, Item} from "vue3-easy-data-table";

const headers: Header[] = [
  {text: "PLAYER", value: "player"},
  {text: "TEAM", value: "team"},
  {text: "NUMBER", value: "number"},
  // { text: "POSITION", value: "position"},
  // { text: "HEIGHT", value: "height"},
  // { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  // { text: "LAST ATTENDED", value: "lastAttended"},
  // { text: "COUNTRY", value: "country"},
];

const items: Item[] = [
  {
    "player": "Stephen Curry",
    "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201939.png",
    "team": "GSW",
    "number": 30,
    "position": 'G',
    "height": '6-2',
    "weight": 185,
    "lastAttended": "Davidson",
    "country": "USA"
  },
  {
    "player": "Lebron James",
    "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/2544.png",
    "team": "LAL",
    "number": 6,
    "position": 'F',
    "height": '6-9',
    "weight": 250,
    "lastAttended": "St. Vincent-St. Mary HS (OH)",
    "country": "USA"
  },
  {
    "player": "Kevin Durant",
    "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201142.png",
    "team": "BKN",
    "number": 7,
    "position": 'F',
    "height": '6-10',
    "weight": 240,
    "lastAttended": "Texas-Austin",
    "country": "USA"
  },
  {
    "player": "Giannis Antetokounmpo",
    "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/203507.png",
    "team": "MIL",
    "number": 34,
    "position": 'F',
    "height": '6-11',
    "weight": 242,
    "lastAttended": "Filathlitikos",
    "country": "Greece"
  },
];
</script>

